import React, { useState } from 'react'
import { useEffect } from 'react';
import DocumentTitle from 'react-document-title'
import { useParams } from 'react-router-dom'
import { getCategoryGoodsList } from '@api/home'
import { HomeGoodsItemHOC } from '@common/goodsItem'
import { EmptyData } from '@common';
import { MinGoodsDetail } from '../../../home/component/home'




const CategoryGoods = (props) => {
    const params = useParams();
    const [goodsList, setGoodsList] = useState([])


    useEffect(() => {

        let config = {
            code: params.code,
            page_num: 100,
            page: 0
        }
        getCategoryGoodsList(config).then(res => {
            if (res.status === 200) {
                setGoodsList(res.data.index)
            }
        })

    }, [params])



    return (

        <>
            <DocumentTitle title={props.route.title} />

            <div className="top"

            >

            </div>
            <div className="container"
                style={{
                    marginTop: '.32rem',
                }}
            >
                {
                    goodsList.length > 0 &&
                    goodsList.map((item, key) => {
                        return (
                            <HomeGoodsItemHOC MinGoodsDetail={MinGoodsDetail} key={key + item.id} {...item} marginStyle={{ margin: ".16rem 0", boxSizing: 'border-box', padding: '.32rem 0', borderRadius: '.15rem' }} />
                        )
                    })
                }

                {
                    goodsList.length === 0 &&
                    <EmptyData who="该分类暂无商品" />
                }
            </div>

        </>
    )
}

export default CategoryGoods